<template>
    <div>
        <el-dialog title="提现设置" :visible="show" width="560px" center :before-close="cancel">
            <el-form :model="info" ref="form" :rules="rules" :inline="true" label-width="150px" label-position="left">
                <el-form-item label="提现方式:" prop="cashType">
                    <el-radio v-model="info.cashType" :label="1">提现至自有账户</el-radio>
                    <el-radio v-model="info.cashType" :label="2">提现至上级账户</el-radio>
                </el-form-item>
                <el-form-item label="结算方式:" prop="settleType">
                    <el-radio v-model="info.settleType" :label="1">每日结算</el-radio>
                    <el-radio v-model="info.settleType" :label="2">每月结算</el-radio>
                </el-form-item>
                <el-form-item label="结算日:" prop="settleDay" v-show="info.settleType == 2">
                    <el-input v-maxnum="{ obj: info, key: 'settleDay', int: true, max: 28 }" placeholder="取值1~28"
                        v-model="info.settleDay">
                        <span slot="suffix">号</span>
                    </el-input>
                </el-form-item>
                <el-form-item label="提现天数:" prop="cashDay">
                    <div class="flex" style="display:flex">
                        <span>
                            T+
                        </span>
                        <el-input class="flex-input" v-model="info.cashDay" @input="handleInput">
                        </el-input>
                        <div>
                            天
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="confirm">
                    确定
                </el-button>
                <el-button @click="cancel">
                    取消
                </el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import BeeperApi from '@/api/equip/beeper';
export default {
    props: {
        show: {
            type: Boolean
        },
        info: {
            cashType: "",
            settleType: "",
            settleDay: "",
            cashDay: "",
        }
    },

    data() {
        return {
            // cash: {

            // },
            rules: {
                cashType: [
                    { required: true, message: "请选择提现方式", trigger: "change" }
                ],
                settleType: [
                    { required: true, message: "请选择结算方式", trigger: "change" }
                ],
                cashDay: [
                    { required: true, message: "请输入提现天数", trigger: "blur" }
                ],
            },
            settleDay: [
                { required: true, message: "请输入结算日", trigger: "blur" }
            ],
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.$nextTick(() => {
                    // console.log(this.$refs.form)
                    this.$refs.form.clearValidate()
                })
            }
        },
        'info.settleType': {
            handler(val) {
                const { settleDay, rules } = this
                if (val == 2) {
                    this.$set(rules, 'settleDay', settleDay)
                } else if (val == 1) {
                    this.$delete(rules, 'settleDay')
                }
                this.$nextTick(() => {
                    // console.log(this.$refs.form)
                    this.$refs.form.clearValidate()
                })
            },
            // immediate:true
        }
    },
    methods: {
        init() {

        },
        handleInput() {
            this.info.cashDay = this.info.cashDay.replace(/([^\d]*)|(^0$)/g, "")
        },
        async confirm() {
            await this.$refs.form.validate()
            await this.$confirm("确定提交？","提示",{})
            this.$emit('confirm')
        },
        cancel() {
            // this.$emit("show:update",false)
            this.$emit("update:show", false)
            console.log("取消")
        }

    }
}
</script>
  
<style scoped lang="scss"></style>
<style scoped lang="scss">
.el-form-item {
    width: 100%;

    &::v-deep .el-form-item__content {
        width: 310px;

        .flex {
            .flex-input {
                // width:240px;
                margin: 0 10px !important;
                width: 80%;

                &::v-deep .el-input__inner {
                    width: 100% !important;
                }
            }
        }
    }
}
</style>
  